<!--
 * @Description: 地图搜索公用组件
 * @Author: JiangMing
 * @Date: 2021-09-10 11:56:00
 * @LastEditors: tangyanqing
 * @LastEditTime: 2021-09-13 15:01:02
-->
<template>
  <view class="search-bar">
    <uni-search-bar
      v-model="keyword"
      placeholder="输入关键词搜索"
      bgColor="#FFF"
      radius="8"
      class="search-input"
      cancelButton="none"
      :focus="true"
      @input="search"
      @focus="resultShow = true"
    >
      <uni-icons slot="searchIcon" color="#027AFF" size="18" type="search" />
    </uni-search-bar>
    <view v-if="resultExt" class="search-result">
      <view v-for="(item,index) in poiList" :key="index" class="result-item" @click="poiClick(item)">
        <view class="result-item__info">
          <view class="title">{{ item.title }}</view>
          <view class="note">{{ item.address }}</view>
        </view>
        <view v-if="item.title == currentPoi.title" class="result-item__checked">
          <uni-icons type="checkmarkempty" size="20" color="#027AFF"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPoiSearch, MapKey } from '@/api/map.js';

export default {
  props: {
    center: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      keyword: '',
      resultShow: false,
      poiList: [],
      currentPoi: {}
    }
  },
  computed: {
    resultExt() {
      return this.poiList.length && this.resultShow;
    }
  },
  methods: {
    // 搜索地图poi
    getPoiList() {
      const { longitude, latitude, radius } = this.center;
      const options = {
        lng: longitude,
        lat: latitude,
        radius: radius || 1000
      }
      if (!this.keyword) {
        this.poiList = [];
        return;
      }
      // #ifdef H5
      getPoiSearch(this.keyword, options).then(res => {
        console.log(res)
        this.poiList = res || [];
        this.resultShow = true;
        this.$emit('result', this.poiList);
      })
      // #endif
      // #ifndef H5
      uni.request({
        url: 'https://apis.map.qq.com/ws/place/v1/search',
        data: {
          keyword: encodeURI(this.keyword),
          boundary: `nearby(${latitude},${longitude},${options.radius},1)`,
          page_size: 20,
          key: MapKey
        },
        success: res => {
          console.log(res)
          this.poiList = res.data.data || [];
          this.resultShow = true;
          this.$emit('result', this.poiList);
        }
      })
      // #endif
    },
    // 关键词搜索
    search(val) {
      console.log(val)
      this.getPoiList();
    },
    searchFocus() {
      this.resultShow = true;
    },
    searchBlur() {
      this.resultShow = false;
    },
    // 结果点击
    poiClick(row) {
      this.currentPoi = row;
      this.keyword = row.title;
      this.resultShow = false;
      this.$emit('change', row);
    },
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  position: relative;
  .result-ext {
    height: 700rpx;
  }
  .search-input {
    padding: 0;
    ::v-deep .uni-searchbar__box {
      height: 80rpx;
      box-shadow: 0px 5rpx 15rpx rgba(2, 122, 255, 0.2);
    }
  }
}
.search-result {
  position: relative;
  top: 10rpx;
  left: 0;
  right: 0;
  background-color: #FFF;
  max-height: 600rpx;
  overflow-y: auto;
  border-radius: 10rpx;
  .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 32rpx;
    border-bottom: 1px solid #eee;
  }
  .result-item__info {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .title {
      font-size: 32rpx;
      color: #2B2B2B;
      margin-bottom: 10rpx;
    }
    .note {
      font-size: 28rpx;
      color: #666;
    }
  }
  .result-item__checked {

  }
}
</style>